import styled from 'styled-components'



export const PopupStyle = styled.div`
    .goods-option-popup{
      color: #474747;
        .goods{
            /* height: 1.65rem; */
            justify-content: unset;
            padding-bottom: .41rem;
            .left{
                img{
                    background-color: goldenrod;
                    height: 1.6rem;
                    width: 1.6rem;
                }
            }
            .right{
                width: 6.72rem;
                margin-left: .27rem;
                align-items: flex-start;
                .title{
                  text-align: left;
                  width: 100%;
                  font-weight: bold;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                }
                .sale-num{
                  margin: .05rem 0;
                  font-weight: 300;
                  span:nth-child(2){
                    margin-left: 1.48rem;
                  }
                }
                .price{
                  color: #FF762E;
                  font-size: .48rem;
                  font-weight: bold;
                }
            }
        }
        
        .bottom{

            border-top: solid  1px rgba(71, 71, 71, .2);

          .num{
            height: 1.18rem;
            /* border-bottom: solid 1px rgba(71, 71, 71, .2); */
            color: #474747;
            .num-limit{
                font-weight: bold;
                span{
                  opacity: .5;
                  margin-left: .27rem;
                  font-size: .29rem;
                }
            }
            .num-input{
              height: 100%;
              .content{
                height: 100%;
                width: 4.4rem;
                .cube{
                  width: .73rem;
                  height: .65rem;
                  border: 1px solid #DADADA;
                  border-radius: .15rem;
                  line-height: .65rem;
                }
                .goodsnum{
                  color: #474747;
                  border: 1px solid #DADADA;
                  border-radius: .15rem;
                  background: white;
                  width: 2.27rem;
                  height: .65rem;
                  text-align: center;
                }
              }
            }
        }
        }

    
       

        .caigou{
            margin-top: .76rem;
            height: .95rem;
            border: none;
            width: 100%;
            text-align: center;
            background-color: #FF762E;
            line-height: .99rem;
            border-radius: .75rem;
            color: white;
            font-weight: bold;
        }

        .close{
          position: absolute;
          right: .32rem;
          img{
            width: .53rem;
            height: .53rem;
          }
        }
    }
`


export const GoodsOptionStyle = styled.div`

height:4rem;
overflow: scroll; 

.goods-option{
  box-sizing: border-box;
  background-color: white;
  align-items: flex-start;

  .option-items{
    .option-text{
      text-align: left;
      color: #474747;
      font-size: .4rem;
      font-weight: bold; 
    }

    ul{
      flex-wrap: wrap;
      justify-content: unset;
      margin: .2rem 0;
      
      .active{
        background: #FF762E;
      }

      li{
        color: white;
        background: #C1C1C1;
        padding: .15rem .25rem;
        margin-right: .32rem;
        border-radius: .13rem;
      }
      li:nth-child(3n+3){
        /* 选择三的倍数 */
        /* margin-right: 0; */
      }
    }
  }
}


`

export const CartOptionStyle = styled.div`
  .cart-option{
  /* height: 3.28rem; */
  border-top: solid 1px rgba(71, 71, 71, .2);
  border-bottom: solid 1px rgba(71, 71, 71, .2);
  align-items: flex-start;
  .option-items{
    .option-text{
      font-size: .4rem;
      font-weight: bold;
      /* margin-bottom: .39rem; */
      text-align: left;


    }

    ul{
      justify-content: flex-start;
      margin-top: .39rem;

      li{
        width: 1.96rem;
        height: .65rem;
        border: 1px solid #DADADA;
        border-radius: .15rem;
        line-height: .65rem;
        margin-right:  1.43rem;
      }
      li:nth-child(3n+3){
        /* 选择三的倍数 */
        margin-right: 0;
      }

      .active{
        background-color: #ff762e;
        color: white;
      }
    }
  }

}
`